<script setup lang="ts"></script>
<template>
<div class="stepAdd">
    <p class="blue">提示：预审通过后自然人股东需要人脸识别</p>
    <p v-if="type==1" class="mb-4">最少一人，股东可以是自然人，也可以是其他企业机构，如果股东只有一个自然人，那么之后就不能再成立一人有限责任公司，只能和其他人合资成立公司。</p>
    <p v-if="type==2" class="mb-4">法定代表人将代表公司，是公司具体事务的执行者和负责人，法定代表人可以由自然人股东担任，也可以由股东外的其他人担任。</p>
    <p v-if="type==3" class="mb-4">监事是为了防止董事、经理等管理人员滥用职权损害公司利益而设立的，负责监察职责的人员。监事不能由法定代表人、董事、经理、财务经理等高级管理人员担任。股东可以自己担任监事，也可以由股东以外的人担任。</p>
    <p v-if="type==4" class="mb-4">财务负责人必须持有会计上岗证或者通过财务初级考试，如您没有专职的财务人员，可委托我们代理记账。如果您没有财务负责人，可以委托企小满为您代理记账， 查看服务详情</p>
    <p v-if="type==5" class="mb-4">有时候政府监管部门会通过电话、短息的方式为您提供一些政策上的提醒，或者通过联络员联系企业核对相关信息，处理相关业务。</p>
    <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="已有人员" v-if="type!=1">
            <a-row>
                <a-col :span="12">
                    <a-select ref="select" v-model:value="value1" @focus="focus" @change="handleChange">
                        <a-select-option value="jack">Jack</a-select-option>
                        <a-select-option value="lucy">Lucy</a-select-option>
                        <a-select-option value="Yiminghe">yiminghe</a-select-option>
                    </a-select>
                </a-col>
                <a-col :span="12">
                    <p style="padding-left:20px" class="tip blue">提示：如法定代表人为公司股东可直接选择</p>
                </a-col>
            </a-row>
        </a-form-item>
        <a-form-item label="证件照片">
            <a-row :gutter="16">
                <a-col :span="12">
                    <div class="cardAdd">
                        <p class="flex-middle" @click="addInfo(1)"><img src="@/assets/add-border.svg" alt="" class="w-6 mr-2">上传身份证正面照片</p>
                    </div>
                </a-col>
                <a-col :span="12">
                    <div class="cardAdd">
                        <p class="flex-middle" @click="addInfo(1)"><img src="@/assets/add-border.svg" alt="" class="w-6 mr-2">上传身份证背面照片</p>
                    </div>
                </a-col>
            </a-row>
            <p class="tip">请上传证件照片，您提供的证件影像信息将被上传至工商登记部门的系统内，您也可以暂时不上传，但需要在注册过程中提供给我们。</p>
        </a-form-item>
        <a-form-item label="成员名称">
            <a-input v-model:value="validateInfos.price" placeholder="请输入成员名称" size="large"></a-input>
        </a-form-item>
        <a-form-item label="证件号码">
            <a-input v-model:value="validateInfos.price" placeholder="请输入证件号码" size="large"></a-input>
        </a-form-item>
        <a-row :gutter="32">
            <a-col :span="12">
                <a-form-item label="有限期限" :labelCol="labelCol2">
                    <a-date-picker v-model:value="value1" placeholder="请输入有限期限" />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="失效期限" :labelCol="labelCol2">
                    <a-date-picker v-model:value="value1" placeholder="请输入失效期限" />
                </a-form-item>
            </a-col>
        </a-row>
        <a-form-item label="联系电话">
            <a-input v-model:value="validateInfos.price" placeholder="请输入联系电话" size="large"></a-input>
        </a-form-item>
        <a-form-item label="联系地址">
            <a-input v-model:value="validateInfos.price" placeholder="请输入联系地址" size="large"></a-input>
        </a-form-item>
        <!-- <div class="center">
            <a-button type="primary" @click.prevent="onSubmit" size="large" style="margin-right:10px">取消</a-button>
            <a-button type="primary" @click.prevent="onSubmit" size="large">确认</a-button>
        </div> -->
    </a-form>
</div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRaw ,ref,computed} from 'vue';
import {
    useStore
} from "vuex";
import { Form } from 'ant-design-vue';
// import CountdownButton from '@/components/common/countdown-button.vue'

const useForm = Form.useForm;
export default defineComponent({
    props:{
        type:{
            type:Number,
            default:1
        }
    },
  setup() {
    const store = useStore();
    const state = store.state;
   
    const modelRef = reactive({
        companyType:'',
        companyType2:'',
        price:'',
        checked:ref<boolean>(false)
    });
    const rulesRef = reactive({
    //   code: [
    //     {
    //       required: true,
    //       message: '请输入验证码',
    //     },
    //   ],
    });
    const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef, {
      onValidate: (...args) => console.log(...args),
    });
    const onSubmit = () => {
      validate()
        .then(() => {
          console.log(toRaw(modelRef),'提交');
          store.commit('setRegCompanyStepsCurrent',2)
        })
        .catch(err => {
          console.log('error', err);
        });
    };
    const handleChange = (value: string) => {
      console.log(`selected ${value}`);
    };
    return {
      validateInfos,
      resetFields,
      modelRef,
      onSubmit,
      labelCol: { span: 3 },
      wrapperCol: { span: 21 },
      labelCol2:{span:6},
      handleChange
    };
  },
});
</script>

<style lang="less" scoped>
.stepAdd {
    padding: 0 60px;
}

.cardAdd {
    width: 260px;
    height: 160px;
    color: rgba(25, 165, 235, 1);
    background-color: rgba(255, 255, 255, 1);
    border-radius: 12px;
    font-size: 16px;
    border: rgba(229, 229, 229, 1) solid 1px;
    text-align: center;
    margin: 25px 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0;

    .img {
        margin-right: 4px;
    }
}

.flex-middle {
    display: flex;
    align-items: center;
}

.addLimit {
    height: 60px;
    color: rgba(25, 165, 235, 1);
    background-color: rgba(255, 255, 255, 1);
    border-radius: 2px;
    font-size: 16px;
    line-height: 150%;
    border: rgba(229, 229, 229, 1) solid 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.ant-calendar-picker {
    width: 100%;
}
</style>
